<html>

<head>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta charset='utf-8'>
    <script src='lib/esl.js'></script>
    <script src='lib/config.js'></script>
    <script src='lib/jquery.min.js'></script>
    <script src='http://api.map.baidu.com/api?v=2.0&ak=f1fDloSaEg8RacXSOxw8ckINhC1uZIHd'></script>
    <meta name='viewport' content='width=device-width, initial-scale=1' />
</head>

<body>
    <style>
        html,
        body,
        #main {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <div id='main'></div>
    <script>
        require([
            'echarts',

            // 'echarts/chart/lines',
            // 'echarts/component/legend',
            'extension/bmap'
        ], function (echarts) {
            var huan4 = [
                [116.465497, 39.83905],
                [116.475845, 39.842152],
                [116.493955, 39.859435],
                [116.495968, 39.875606],
                [116.49683, 39.885793],
                [116.497117, 39.957508],
                [116.493955, 39.965472],
                [116.475845, 39.977415],
                [116.459173, 39.988251],
                [116.449399, 39.994],
                [116.437614, 39.995548],
                [116.389608, 39.993558],
                [116.368624, 39.992895],
                [116.325505, 39.991126],
                [116.304233, 39.990684],
                [116.298197, 39.987588],
                [116.29331, 39.981838],
                [116.288423, 39.980069],
                [116.284111, 39.977636],
                [116.281237, 39.974761],
                [116.281524, 39.967241],
                [116.281811, 39.954411],
                [116.281237, 39.929628],
                [116.280374, 39.907271],
                [116.280087, 39.89753],
                [116.282961, 39.885572],
                [116.288136, 39.876049],
                [116.290148, 39.869404],
                [116.289285, 39.861429],
                [116.28986, 39.853896],
                [116.291585, 39.849465],
                [116.29331, 39.845254],
                [116.293597, 39.841487],
                [116.297909, 39.836612],
                [116.337291, 39.837055],
                [116.369199, 39.836833],
                [116.424965, 39.838385],
                [116.465497, 39.83905],
            ];
            var huan41 = [
                [116.298197, 39.987588],
                [116.29331, 39.981838],
                [116.288423, 39.980069],
                [116.284111, 39.977636],
                [116.281237, 39.974761],
                [116.281524, 39.967241],
                [116.281811, 39.954411],
                [116.281237, 39.929628],
                [116.280374, 39.907271],
                [116.280087, 39.89753],
                [116.282961, 39.885572],
                [116.288136, 39.876049],
                [116.290148, 39.869404],
                [116.289285, 39.861429],
                [116.28986, 39.853896],
                [116.291585, 39.849465],
                [116.29331, 39.845254],
                [116.293597, 39.841487],
                [116.297909, 39.836612],
                [116.337291, 39.837055],
                [116.369199, 39.836833],
                [116.424965, 39.838385],
                [116.465497, 39.83905],
                [116.475845, 39.842152],
                [116.493955, 39.859435],
                [116.495968, 39.875606],
                [116.49683, 39.885793],
                [116.497117, 39.957508],
                [116.493955, 39.965472],
                [116.475845, 39.977415],
                [116.459173, 39.988251],
                [116.449399, 39.994],
                [116.437614, 39.995548],
                [116.389608, 39.993558],
                [116.368624, 39.992895],
                [116.325505, 39.991126],
                [116.304233, 39.990684],
            ];
            var huan42 = [
                [116.291585, 39.849465],
                [116.29331, 39.845254],
                [116.293597, 39.841487],
                [116.297909, 39.836612],
                [116.337291, 39.837055],
                [116.369199, 39.836833],
                [116.424965, 39.838385],
                [116.465497, 39.83905],
                [116.475845, 39.842152],
                [116.493955, 39.859435],
                [116.495968, 39.875606],
                [116.49683, 39.885793],
                [116.497117, 39.957508],
                [116.493955, 39.965472],
                [116.475845, 39.977415],
                [116.459173, 39.988251],
                [116.449399, 39.994],
                [116.437614, 39.995548],
                [116.389608, 39.993558],
                [116.368624, 39.992895],
                [116.325505, 39.991126],
                [116.298197, 39.987588],
                [116.29331, 39.981838],
                [116.288423, 39.980069],
                [116.284111, 39.977636],
                [116.281237, 39.974761],
                [116.281524, 39.967241],
                [116.281811, 39.954411],
                [116.281237, 39.929628],
                [116.280374, 39.907271],
                [116.280087, 39.89753],
                [116.282961, 39.885572],
                [116.288136, 39.876049],
                [116.290148, 39.869404],
                [116.289285, 39.861429],
                [116.28986, 39.853896],
                [116.291585, 39.849465],
            ];
            var getHuan4 = function (huan4) {
                var points = [];
                for (var ii = 0; ii < huan4.length; ii++) {
                    points.push([huan4[ii][0], huan4[ii][1]])
                };
                return {
                    coords: points,
                    lineStyle: {
                        normal: {
                            //color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                            color: '#05FE0A'

                        }
                    }

                }
            };
            var myChart = echarts.init(document.getElementById('main'));

            $.get('data/lines-bus.json', function (data) {
                var hStep = 300 / (data.length - 1);
                var busLines = data.map(function (busLine, idx) {

                    var prevPt;
                    var points = [];
                    for (var i = 0; i < busLine.length; i += 2) {
                        var pt = [busLine[i], busLine[i + 1]];
                        if (i > 0) {
                            pt = [
                                prevPt[0] + pt[0],
                                prevPt[1] + pt[1]
                            ];
                        }
                        prevPt = pt;

                        points.push([pt[0] / 1e4, pt[1] / 1e4]);
                    }
                    return {
                        coords: points,
                        lineStyle: {
                            normal: {
                                //color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                                color: '#F6EC2C'

                            }
                        }
                    };
                });
                var busLines2 = data.map(function (busLine, idx) {
                    var prevPt;
                    var points = [];
                    for (var i = 0; i < busLine.length; i += 2) {
                        var pt = [busLine[i], busLine[i + 1]];
                        if (i > 0) {
                            pt = [
                                prevPt[0] + pt[0],
                                prevPt[1] + pt[1]
                            ];
                        }
                        prevPt = pt;

                        points.push([pt[0] / 1e4, pt[1] / 1e4]);
                    }
                    return {
                        coords: points,
                        lineStyle: {
                            normal: {
                                //color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                                color: '#E54C22',


                            }
                        }
                    };
                });


                console.log(busLines);
                busLines = busLines.slice(0, 200);
                busLines2 = busLines2.slice(200, 230);
                var huan4Line = busLines2;
                var huan41Line = busLines2;
                var huan42Line = busLines2;

                //换线1
                var huan4arry = getHuan4(huan4);
                huan41Line = [huan4arry];

                //环线2
                var huan41arry = getHuan4(huan41);
                huan4Line = [huan41arry];
                //换线3
                var huan42arry = getHuan4(huan42);
                huan42Line = [huan42arry];

                debugger;
                myChart.setOption({
                    animation: false,
                    bmap: {
                        center: [116.36, 39.92],
                        zoom: 12,
                        roam: true,
                        mapStyle: {
                            'styleJson': [{
                                    'featureType': 'water',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#031628'
                                    }
                                },
                                {
                                    'featureType': 'land',
                                    'elementType': 'geometry',
                                    'stylers': {
                                        'color': '#000102'
                                    }
                                },
                                {
                                    'featureType': 'highway',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                },
                                {
                                    'featureType': 'arterial',
                                    'elementType': 'geometry.fill',
                                    'stylers': {
                                        'color': '#000000'
                                    }
                                },
                                {
                                    'featureType': 'arterial',
                                    'elementType': 'geometry.stroke',
                                    'stylers': {
                                        'color': '#0b3d51'
                                    }
                                },
                                {
                                    'featureType': 'local',
                                    'elementType': 'geometry',
                                    'stylers': {
                                        'color': '#000000'
                                    }
                                },
                                {
                                    'featureType': 'railway',
                                    'elementType': 'geometry.fill',
                                    'stylers': {
                                        'color': '#000000'
                                    }
                                },
                                {
                                    'featureType': 'railway',
                                    'elementType': 'geometry.stroke',
                                    'stylers': {
                                        'color': '#08304b'
                                    }
                                },
                                {
                                    'featureType': 'subway',
                                    'elementType': 'geometry',
                                    'stylers': {
                                        'lightness': -70
                                    }
                                },
                                {
                                    'featureType': 'building',
                                    'elementType': 'geometry.fill',
                                    'stylers': {
                                        'color': '#000000'
                                    }
                                },
                                {
                                    'featureType': 'all',
                                    'elementType': 'labels.text.fill',
                                    'stylers': {
                                        'color': '#857f7f'
                                    }
                                },
                                {
                                    'featureType': 'all',
                                    'elementType': 'labels.text.stroke',
                                    'stylers': {
                                        'color': '#000000'
                                    }
                                },
                                {
                                    'featureType': 'building',
                                    'elementType': 'geometry',
                                    'stylers': {
                                        'color': '#022338'
                                    }
                                },
                                {
                                    'featureType': 'green',
                                    'elementType': 'geometry',
                                    'stylers': {
                                        'color': '#062032'
                                    }
                                },
                                {
                                    'featureType': 'boundary',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#465b6c'
                                    }
                                },
                                {
                                    'featureType': 'manmade',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#022338'
                                    }
                                },
                                {
                                    'featureType': 'label',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }
                            ]
                        }
                    },
                    series: [
                        //路
                        {
                            type: 'lines',
                            coordinateSystem: 'bmap',
                            polyline: true,
                            data: busLines,
                            silent: true,
                            lineStyle: {
                                normal: {
                                    color: '#F6EC2C',
                                    // color: 'rgb(200, 35, 45)',
                                    opacity: 0.2,
                                    width: 0.1
                                }
                            },
                            progressiveThreshold: 500,
                            progressive: 200
                        },
                        //动态轨迹
                        {
                            type: 'lines',
                            coordinateSystem: 'bmap',
                            polyline: true,
                            data: busLines,
                            lineStyle: {
                                normal: {
                                    width: 0,

                                }
                            },
                            effect: {
                                constantSpeed: 20,
                                show: true,
                                trailLength: 0.1,
                                symbolSize: 7
                            },

                        },
                        //动态轨迹2
                        {
                            type: 'lines',
                            coordinateSystem: 'bmap',
                            polyline: true,
                            data: busLines2,
                            lineStyle: {
                                normal: {
                                    width: 0.1,

                                }
                            },
                            effect: {
                                constantSpeed: 22,
                                show: true,
                                trailLength: 0.7,
                                symbolSize: 15
                            },
                            zlevel: 1
                        },
                        //换线1
                        {
                            type: 'lines',
                            coordinateSystem: 'bmap',
                            polyline: true,
                            data: huan41Line,
                            lineStyle: {
                                normal: {
                                    width: 0.1,

                                }
                            },
                            effect: {
                                constantSpeed: 60,
                                show: true,
                                trailLength: 0.7,
                                symbolSize: 15
                            },
                            zlevel: 1
                        },
                        //环线2
                        {
                            type: 'lines',
                            coordinateSystem: 'bmap',
                            polyline: true,
                            data: huan42Line,
                            lineStyle: {
                                normal: {
                                    width: 0.1,

                                }
                            },
                            effect: {
                                constantSpeed: 60,
                                show: true,
                                trailLength: 0.7,
                                symbolSize: 15
                            },
                            zlevel: 1
                        },
                        //环线3
                        {
                            type: 'lines',
                            coordinateSystem: 'bmap',
                            polyline: true,
                            data: huan4Line,
                            lineStyle: {
                                normal: {
                                    width: 0.1,

                                }
                            },
                            effect: {
                                constantSpeed: 60,
                                show: true,
                                trailLength: 0.7,
                                symbolSize: 15
                            },
                            zlevel: 1
                        },
                    ]
                });

            });
        });
    </script>
</body>

</html>